<template>
  <Card>
    <h3>{{ sortListTitleMap[props.page][props.type].title }}</h3>
    <List
      size="small"
      bordered
      item-layout="horizontal"
      class="statistic-list"
      :data-source="listData"
    >
      <template #renderItem="{ item }">
        <ListItem>
          <ListItemMeta>
            <template #title>
              <div>{{ item.name }}</div>
            </template>
            <template #description>
              <div class="flex justify-bewteen">
                <Progress
                  size="small"
                  strokeColor="#99CCFF"
                  :percent="(item.value / maxValue) * 100"
                  :show-info="false"
                />
                <div class="md:mx-2">{{ item.value }}</div>
              </div>
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>
  </Card>
</template>

<script lang="ts">
import {
  List,
  Card,
  Row,
  Col,
  Form,
  FormItem,
  Select,
  SelectOption,
  Button,
  Progress,
} from 'ant-design-vue';
import { defineComponent, onMounted, ref, watch } from 'vue';
import { sortListTitleMap } from '../apm.data';
import { getTopNSortedMetrics } from '/@/api/maintenance-center/skywalking/dashboard/apm';
import { QueryTopNConditionReq } from '/@/api/maintenance-center/skywalking/dashboard/model/apmModel';
/* eslint-disable */
export default defineComponent({
  components: {
    Button,
    Row,
    Col,
    Form,
    FormItem,
    Select,
    Card,
    List,
    ListItem: List.Item,
    ListItemMeta: List.Item.Meta,
    Progress,
    SelectOption,
  },
  props: {
    page: String,
    type: String,
    start: String,
    end: String,
    step: String,
    serviceName: String,
  },
  setup(props, { emit }) {
    console.log('ListCard 子组件接收参数为：', props);

    const listData = ref();

    const maxValue = ref();

    const specialMetrics = ['service_apdex', 'service_instance_sla', 'endpoint_sla'];

    watch(
      () => [props.page, props.type, props.start, props.end, props.step, props.serviceName],
      (val, prevVal) => {
        console.log('ListCard 子组件监听父组件值变化', val);

        if (!ifDateUndefined(val[2], val[3], val[4])) {
          let type = val[1];
          let serviceName = val[5];

          let queryTopNConditionReq: QueryTopNConditionReq = {
            duration: {
              start: val[2],
              end: val[3],
              step: val[4],
            },
            topNCondition: {
              name: type,
              scope: sortListTitleMap[val[0]][type].scope,
              normal: true,
              order: 'DES',
              topN: 10,
            },
          };

          if (specialMetrics.includes(type)) {
            queryTopNConditionReq.topNCondition.order = 'ASC';
          }

          if (serviceName != null && serviceName != undefined && serviceName != '') {
            queryTopNConditionReq.topNCondition.parentService = serviceName;
          }

          console.log('ListCard 子组件监听 请求参数为：', queryTopNConditionReq);

          getTopNSortedMetrics(queryTopNConditionReq).then((res) => {
            let divider = {
              service_apdex: 10000,
              service_instance_sla: 100,
              endpoint_sla: 100,
            };

            if (specialMetrics.includes(type)) {
              for (let i = 0; i < res.length; i++) {
                let element = res[i];
                res[i].value = element.value / divider[type];
              }
            }

            maxValue.value = Math.max.apply(
              Math,
              res.map((item) => {
                return item.value;
              })
            );

            listData.value = res;
          });
        }
      },
      { immediate: true, deep: true }
    );

    function ifDateUndefined(start: string, end: string, step: string) {
      let isStartUndefined = start == '' || start == null || start == undefined;
      let isEndUndefined = end == '' || end == null || end == undefined;
      let isStepUndefined = step == '' || step == null || step == undefined;
      if (isStartUndefined || isEndUndefined || isStepUndefined) {
        return true;
      }
      return false;
    }

    onMounted(() => {});

    return {
      props,
      listData,
      maxValue,
      sortListTitleMap,
    };
  },
});
</script>

<style lang="less" scoped>
.statistic-list {
  height: 330px;
  overflow-y: scroll;
}
</style>
